<template>
	<view class="page">
    <u-navbar :fixed="false" title="报表" :autoBack="true" bgColor="transparent"></u-navbar>
    <view class="content">
      <view class="search">
        <view class="search-type" @click="pickerType = 'type'">{{ form.typeName }}
          <u-icon name="arrow-down" size="24rpx"></u-icon>
        </view>
        <u-search
          placeholder="请输入"
          v-model="searchValue"
          @search="search"
          :showAction="false"
        ></u-search>
      </view>
      <view class="list-title-text u-m-b-20"><view class="text">商品属性</view><view class="line" /></view>
      <view class="table-box">
        <uni-table align="left" border :stripe="false" emptyText="暂无更多数据" >
          <!-- 表头行 -->
          <uni-tr>
            <uni-th v-for="(item, index) in columns" :width="item.width || '160rpx'" :key="index">{{ item.title }}</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item, index) in tableList" :key="index">
            <uni-td v-for="(zitem, zindex) in columns" :key="zindex">
              <template v-if="zitem.slot">
                <template v-if="zitem.key=='actions'"><view @click="setPopupInfo(item)" class="u-color-primary">查看</view></template>
              </template>
              <template v-else>
                {{ item[zitem.key] || '-' }}
              </template>
            </uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>
    <u-popup :show="showPopup" @close="showPopup=false">
      <view class="u-p-l-30 u-p-r-30">
        <view class="list">
          <view class="list-item">
            <view class="code">
              <view class="u-line-1">品牌：{{ popupInfo.Brand || '-' }}</view>
              <view class="status">采购员：{{ popupInfo.PurName || '-' }}</view>
            </view>
            <view class="info">
              <view class="info-item">
                <image src="../../static/icon/编号.png" mode="widthFix" />
                <text>
                  物料编码：{{ popupInfo.MaterialNum || '-' }}
                </text>
              </view>
              <view class="info-item">
                <image src="../../static/icon/名称.png" mode="widthFix" />
                <text>
                  物料名称：{{ popupInfo.MaterialName || '-' }}
                </text>
              </view>
              <view class="info-item">
                <image src="../../static/icon/规格.png" mode="widthFix" />
                <text>
                  规格型号：{{ popupInfo.MaterialModel || '-' }}
                </text>
              </view>
            </view>
            <view class="time">
              <view>
                <text class="lable">物料分组</text>
                <text>{{ popupInfo.MaterialGroupName || '-' }}</text>
              </view>
              <view>
                <text class="lable">原厂规格型号</text>
                <text>{{ popupInfo.MaterialOldModel || '-' }}</text>
              </view>
              <view>
                <text class="lable">整箱/件装量</text>
                <text>{{ popupInfo.WholeQty || '-' }}</text>
              </view>
              <view>
                <text class="lable">商品属性（零售）</text>
                <text>{{ popupInfo.AttributesRetail || '-' }}</text>
              </view>
              <view>
                <text class="lable">商品属性（批发）</text>
                <text>{{ popupInfo.AttributesSale || '-' }}</text>
              </view>
              <view>
                <text class="lable">单位</text>
                <text>{{ popupInfo.UnitName || '-' }}</text>
              </view>
              <view>
                <text class="lable">净重</text>
                <text>{{ popupInfo.Weight || '-' }}</text>
              </view>
              <view>
                <text class="lable">商品材质</text>
                <text>{{ popupInfo.Material || '-' }}</text>
              </view>
              <view>
                <text class="lable">毛利率</text>
                <text>{{ popupInfo.Rate || '-' }}</text>
              </view>
              <view>
                <text class="lable">品牌</text>
                <text>{{ popupInfo.Brand || '-' }}</text>
              </view>
              <view>
                <text class="lable">现存量</text>
                <text>{{ popupInfo.ExistQty || '-' }}</text>
              </view>
              <view>
                <text class="lable">可用量</text>
                <text>{{ popupInfo.UseQty || '-' }}</text>
              </view>
              <view>
                <text class="lable">参考成本</text>
                <text>{{ popupInfo.RefCost || '-' }}</text>
              </view>
              <view>
                <text class="lable">最近一次进货时间</text>
                <text>{{ popupInfo.LastPurDate || '-' }}</text>
              </view>
              <view>
                <text class="lable">最新进货价格</text>
                <text>{{ popupInfo.NewPurPrice || '-' }}</text>
              </view>
              <view>
                <text class="lable">一级批发价</text>
                <text>{{ popupInfo.LevOneSaleP || '-' }}</text>
              </view>
              <view>
                <text class="lable">六级批发价</text>
                <text>{{ popupInfo.LevSixSaleP || '-' }}</text>
              </view>
              <view>
                <text class="lable">八级批发价</text>
                <text>{{ popupInfo.LevEightSaleP || '-' }}</text>
              </view>
              <view>
                <text class="lable">长春零售价</text>
                <text>{{ popupInfo.CcRetailPrice || '-' }}</text>
              </view>
              <view>
                <text class="lable">长春会员价</text>
                <text>{{ popupInfo.CcMemberPrice || '-' }}</text>
              </view>
              <view>
                <text class="lable">哈尔滨零售价</text>
                <text>{{ popupInfo.HbRetailPrice || '-' }}</text>
              </view>
              <view>
                <text class="lable">哈尔滨会员价</text>
                <text>{{ popupInfo.HbMemberPrice || '-' }}</text>
              </view>
              <view>
                <text class="lable">分销价格</text>
                <text>{{ popupInfo.DisPrice || '-' }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
		</u-popup>
    <u-picker ref="uPicker" :show="pickerType!=''" :columns="[pickerInfo[pickerType]]" keyName="name" @confirm="pickerConfirm" @cancel="pickerType = ''"></u-picker>
	</view>
</template>

<script>
import { reportDate } from '@/api/index'

export default {
  data() {
    return {
      searchValue: '000024',
      pickerType: '',
      pickerInfo: {
         type: [
          {
            id: 'MaterialNumber',
            name: '物料编码'
          },
          {
            id: 'PurName',
            name: '采购员名称',
          },
          {
            id: 'SupName',
            name: '供应商'
          },
          {
            id: 'Brand',
            name: '品牌'
          },
          {
            id: 'AttributesRetail',
            name: '商品属性零售'
          },
          {
            id: 'AttributesSale',
            name: '商品属性批发'
          },
          {
            id: 'MaterialGroupName',
            name: '物料分组'
          },
          {
            id: 'OrgNumber',
            name: '组织名称'
          },
          {
            id: 'Material',
            name: '商品材质'
          },
          {
            id: 'RateMax',
            name: '毛利率最大值'
          },
          {
            id: 'RateMin',
            name: '毛利率最小值'
          },
          {
            id: 'ModelName',
            name: '规格型号'
          },
          {
            id: 'YModelName',
            name: '原厂规格型号'
          },
        ],
      },
      form: {
        typeName: '物料编码',
        type: 'MaterialNumber',
      },
      showPopup: false,
      columns: [
        {
          title: '操作',
          key: 'actions',
          width: '100rpx',
          slot: true,
        },
        {
          title: '物料编码',
          key: 'MaterialNum',
        },
        {
          title: '物料名称',
          key: 'MaterialName',
        },
        {
          title: '规格型号',
          key: 'MaterialModel',
        },
        {
          title: '原厂规格型号',
          key: 'MaterialOldModel',
        },
        {
          title: '整箱/件装量',
          key: 'WholeQty',
        },
        {
          title: '商品属性（零售）',
          key: 'AttributesRetail',
        },
        {
          title: '商品属性（批发）',
          key: 'AttributesSale',
        },
        {
          title: '供应商',
          key: 'SupName',
        },
        {
          title: '单位',
          key: 'UnitName',
        },
        {
          title: '净重',
          key: 'Weight',
        },
        {
          title: '商品材质',
          key: 'Material',
        },
        {
          title: '毛利率',
          key: 'Rate',
        },
        {
          title: '品牌',
          key: 'Brand',
        },
        {
          title: '现存量',
          key: 'ExistQty',
        },
        {
          title: '可用量',
          key: 'UseQty',
        },
        {
          title: '参考成本',
          key: 'RefCost',
        },
        {
          title: '最后一次进货时间',
          key: 'LastPurDate',
        },
        {
          title: '最新进货价格',
          key: 'NewPurPrice',
        },
        {
          title: '一级批发价',
          key: 'LevOneSaleP',
        },
        {
          title: '六级批发价',
          key: 'LevSixSaleP',
        },
        {
          title: '八级批发价',
          key: 'LevEightSaleP',
        },
        {
          title: '长春零售价',
          key: 'CcRetailPrice',
        },
        {
          title: '长春会员价',
          key: 'CcMemberPrice',
        },
        {
          title: '哈尔滨零售价',
          key: 'HbRetailPrice',
        },
        {
          title: '哈尔滨会员价',
          key: 'HbMemberPrice',
        },
        {
          title: '分销价格',
          key: 'DisPrice',
        },
        {
          title: '采购员编码',
          key: 'PurName',
        },
        {
          title: '采购员名称',
          key: 'PurName',
        },
        {
          title: '物料分组',
          key: 'MaterialGroupName',
        },
      ],
      tableList: [],
      orgId: '',
      popupInfo: {},
    }
  },
  async onLoad(options) {
    this.orgId = options.orgId
  },
  onShow() {
    this.getForm()
  },
  methods: {
    setPopupInfo(info) {
      this.popupInfo = info
      this.showPopup = true
    },
    getForm() {
      const parameters = {
        MaterialNumber: " ",
        SupName : " ",
        Brand:" ",
        PurName:" ",
        MaterialGroupName: " ",
        OrgNumber: this.orgId,
        AttributesRetail: " ",
        AttributesSale: " ",
        Material:" ",
        RateMax:0,
        RateMin:0,
        ModelName: " ",
        YModelName:" "
      }
      parameters[this.form.type] = this.searchValue
      reportDate({json: JSON.stringify(parameters)}).then(res => {
        if(res.MaterialCost[0].msg != '未查询到数据') {
          this.tableList = res.MaterialCost
        }
      })
    },
    search() {
      this.getForm()
    },
    pickerConfirm(e) {
      if(e.value[0].id == 'OrgNumber') {
        this.goBack()
        return
      }
      if(e.value[0].id) {
        this.form[this.pickerType] = e.value[0].id
        this.form[this.pickerType+'Name'] = e.value[0].name
      } else {
        this.form[this.pickerType] = ''
        this.form[this.pickerType+'Name'] = ''
      }
      this.pickerType = ''
      this.searchValue = ''
    },
  }
}
</script>

<style lang="scss" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  padding-bottom: 188rpx;
  .content {
    width: 100%;
    padding: 0 30rpx;
  }
  .search {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    padding: 16rpx 20rpx;
    background: #FFF;
    border-radius: 20rpx;
    box-shadow: 3rpx 3rpx 4rpx rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    .search-type {
      width: 180rpx;
      margin-right: 10rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      gap: 6rpx;
    }
  }
  .table-box {
    box-shadow: 3rpx 3rpx 4rpx rgba(0, 0, 0, 0.16);
  }
}
.list {
  width: 100%;
  padding: 40rpx 0 30rpx;
  .list-item {
    overflow: hidden;
    margin-bottom: 24rpx;
    padding: 24rpx 0 0;
    width: 100%;
    border-radius: 20rpx;
    background: #FFF;
    box-shadow: 0 4rpx 20rpx -3rpx rgba(0, 0, 0, 0.31);
    .code {
      padding: 0 36rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #999;
      font-family: "PingFang SC";
      font-size: 26rpx;
      margin-bottom: 24rpx;
      .status {
        color: #FF8819;
      }
    }
    .info {
      padding: 0 36rpx;
      margin-bottom: 30rpx;
      .info-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #333;
        font-size: 28rpx;
        margin-bottom: 16rpx;
        image {
          width: 28rpx;
          height: auto;
          margin-right: 20rpx;
        }
      }
    }
    .time {
      width: 100%;
      padding: 16rpx 36rpx;
      background: #F1F5FF;
      view {
        margin-bottom: 10rpx;
        color: #FF881A;
        font-family: "PingFang SC";
        font-size: 26rpx;
        .lable {
          margin-right: 32rpx;
          color: #333;
        }
      }
    }
    .footer {
      padding: 0 36rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .type {
        color: #FF881A;
        font-size: 26rpx;
        .lable {
          color: #333;
        }
      }
      .oper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .btn {
          width: 164rpx;
          height: 58rpx;
          border-radius: 52rpx;
          border: 2rpx solid #4D7AF8;
          color: #4D7AF8;
          font-size: 32rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .btn:first-child {
          margin-right: 30rpx;
        }
      }
    }
  }
}
</style>
